<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="btnBox">
        <input type="button" value="button_1">
        <input type="button" value="button_2">
        <input type="button" value="button_3">
        <input type="button" value="button_4">
        <input type="button" value="button_5">
    </div>
    <script>
        var btnBox = document.getElementById('btnBox'),
            inputs = btnBox.getElementsByTagName('input');
        var l = inputs.length;
        for (var i = 0; i < l; i++) {
            inputs[i].onclick = function() {
                alert(i);
            }
        }
        //1.
        // for (let i = 0; i < l; i++) {
        //     inputs[i].onclick = function() {
        //         alert(i + 1);
        //     }
        // }
        //2.1
        // for (var i = 0; i < l; i++) {
        //     ! function(i) {
        //         inputs[i].onclick = function() {
        //             alert(i + 1);
        //         }
        //     }(i);
        // }
        //2.3
        // for (var i = 0; i < l; i++) {
        //     ~ function(i) {
        //         inputs[i].onclick = function() {
        //             alert(i + 1);
        //         }
        //     }(i);
        // }
        //2.2注意：写在等号后面的立即执行函数不能用~和!符号
        // for (var i = 0; i < l; i++) {
        //     inputs[i].onclick = (function(i) {
        //         return function() {
        //             alert(i + 1);
        //         }
        //     }(i));
        // }

        //3.
        // for (var i = 0; i < l; i++) {
        //     inputs[i].setAttribute('index', i);
        //     inputs[i].onclick = function() {
        //         var i = this.getAttribute('index');
        //         i = Number(i);
        //         alert(i + 1);
        //     }
        // }
        //4.
        // for (var i = 0; i < l; i++) {
        //     inputs[i].index = i;
        //     inputs[i].onclick = function() {
        //         alert(this.index + 1);
        //     }
        // }
        /* 
        核心:该点击事件函数是异步操作,并且变量i不是事件函数的私有变量,是全局的变量,所以拿到的值是循环完毕的全局变量i的值
        我觉得：同步/异步 + var声明的变量没有块级作用域
          上面的代码为啥不行？
            所有的事件绑定都是异步编程(邦定的时候方法并没有执行),当触发点击事件,执行方法的时候,循环早已经结束了

            同步：Js中当前这个任务没有完成,下面的任务都不会执行,只有等当前任务彻底完成才会执行下面的任务
            异步：Js中当前任务没有完成,需要等一会在完成,此时我们可以继续执行下面的任务。
         */
    </script>
</body>

</html>